<template>
    <div class="table-main">
        <div class="query-content">
          <div class="query-search">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="">
                <el-input   v-model="formInline.researchName" placeholder="请输入成果名称" style="min-width: 500px"/>
              </el-form-item>
            </el-form>
          </div>
          <div class="query-btn">
            <el-button   type="primary" @click="onSubmit">查询</el-button>
            <el-button   type="success" @click="onReset">重置</el-button>
          </div>
        </div>
        
        <el-table :data="tableData" border style="width: 100%"   empty-text="暂无数据">
          <el-table-column width="80" label="序号" align="center">
            <template #default="scope">
              {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="researchName" width="250" label="成果名称" align="center"/>
          <el-table-column prop="mainCompletionUnits1" width="200" label="主要完成单位" align="center"/>
          <el-table-column prop="mainCompletionPersion1" width="150" label="主要完成人" align="center"/>
          <el-table-column prop="filingAbstract" width="250" label="摘要" align="center">
            <template #default="scope">
              <el-tooltip 
                effect="dark" 
                :content="scope.row.filingAbstract" 
                placement="top"
                :disabled="!scope.row.filingAbstract"
              >
                <div class="editor-unit-text">
                  {{ scope.row.filingAbstract }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="filingKeywords" label="关键字" align="center"/>
        </el-table>
        <div class="pagination-content">
          <el-config-provider :locale="zhCn">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 100]"
              :small="small"
              background
              layout="sizes, prev, pager, next, jumper"
              :total="total"                   
              @size-change="handleSizeChange"    
              @current-change="handleCurrentChange" 
            />
          </el-config-provider>
        </div>
        
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted  } from 'vue'

import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import axios from 'axios'
import { useRouter } from 'vue-router';
  import { getServerUrl } from "@/utils/url";
  const serverUrl = getServerUrl();
const router = useRouter();

const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const formInline = reactive({
  researchName: ""
})
const small = ref(false)

const onSubmit = () => {
      currentPage.value = 1;
  initData()
}
const onReset = () => {
  formInline.researchName = '';
  currentPage.value = 1;
  initData();
}
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  initData(); 
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  initData(); 
};
const showDetail = (value: any) => {
  // window.open(fileUrl.value, '_blank'); // 使用_blank在新窗口中打开
}
const initData = async () => {
  try{
    const response = await axios.post(serverUrl+'api/scientificResearchProcess/showScientificResearch', {
            pageIndex: currentPage.value,
            pageSize: pageSize.value,
            researchName:formInline.researchName
      });
      tableData.value = response.data.data.list; 
      total.value = response.data.data.total; 
  } catch (error) {
      console.error('数据加载失败:', error);
  }
  
        
};
onMounted(() => {
  initData()
})
</script>
<style lang="scss" scoped>
.query-content {
  display: flex;
  justify-content: space-between
}

.query-search {
  width: 70%;
}

.query-btn {
  min-width: 145px;
}

.pagination-content {
  margin-top: 1.43rem;
  display: flex;
  justify-content: center;
}

.icon-w {
  margin-left: 20px;
}

::v-deep .el-table__empty-text {
  color: #666;
  /* 文本颜色 */
  font-size: 16px;
  /* 文本大小 */
  margin: 40px 0;
  /* 上下间距，避免过于紧凑 */
}

.editor-unit-text {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  line-height: 1.5;
  max-height: 3;
}
</style>